<template>
	<view>
		<button type="warn" class="mt-3" size="mini" @click="openSign">{{btnText}}</button>
		<u-popup :show="showSign" :safeAreaInsetTop="true" :safeAreaInsetBottom="true" :closeable="false"
			@close="closeSign" mode="right">
			<view class="w-screen h-screen">
				<view class=" w-full h-full">
					<l-signature landscape disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
						:openSmooth="openSmooth"></l-signature>
				</view>

				<view class="fixed  w-full p-3  h-20 bottom-0 flex justify-center items-center bg-gray-200">
					<button class="rotate-90 h-8 w-20" size="mini" type="default" @click="closeSign()">关闭</button>
					<button class="rotate-90 h-8 w-20" size="mini" type="default" @click="action('clear')">清空</button>
					<button class="rotate-90 h-8 w-20" size="mini" type="default" @click="action('undo')">上一步</button>
					<button class="rotate-90 h-8 w-20" size="mini" type="primary" @click="action('save')">保存</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			"btnText":String
		}, 
		name: "z-sign",
		emits: ['saveImgData'],
		data() {
			return {
				openSmooth: true,
				showSign: false,
				base64: '',
				penColor: 'black',
				penSize: 12
			};
		},
		methods: {
			openSign() {
				console.log('openSign');
				this.showSign = true
			},
			closeSign() {
				this.showSign = false
			},
			action(type) {
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							if(!res.isEmpty){
								// 生成图片的临时路径
								// H5 生成的是base64
								this.base64 = res.tempFilePath
								this.$emit( 'saveImgData',this.base64 )
							}
							
							this.showSign = false
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			}
		}

	}
</script>

<style>

</style>